<template>
  <div>
    <div class="card tr mb2">
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="showDialog" style="float:left">添加</el-button>
      <el-button size="mini" plain @click="expandAll()" style="float:left">展开/折叠所有</el-button>
      <el-popover placement="bottom" width="200" trigger="click">
        <el-checkbox-group v-model="showItemList">
          <el-checkbox v-for="(item,key) in allItemList" :key="key" :label="item"></el-checkbox>
        </el-checkbox-group>
        <el-button slot="reference" icon="el-icon-menu" size="mini" type="primary" circle></el-button>
      </el-popover>
      <el-button icon="el-icon-search" @click="formShow= !formShow" size="mini" type="primary" circle></el-button>
    </div>
    <el-table border style="width: 100%" ref="tableTreeRef" :data="tableData" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="areaName" label="区域名称" sortable min-width="200">
      </el-table-column>
      <el-table-column prop="areaCode" label="区域编码" sortable min-width="180">
      </el-table-column>
      <el-table-column prop="areaTypeName" label="区域类型" min-width="180">
      </el-table-column>
      <el-table-column prop="address" label="备注" min-width="180">
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="300">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">
            修改
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="delete(scope.row,scope.$index)">
            删除
          </el-button>
          <el-button type="success" size="mini" icon="el-icon-add" @click="delete(scope.row,scope.$index)">
            添加下级区域
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增区域" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="addForm" >
        <el-form-item label="上级区域"  :label-width="formLabelWidth">
          <el-input v-model="form.parentId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="区域名称"  :label-width="formLabelWidth">
          <el-input v-model="form.areaName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="区域编码"  :label-width="formLabelWidth">
          <el-input v-model="form.areaCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="区域类型" :label-width="formLabelWidth" >
          <el-select v-model="form.areaType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注"  :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form:{},
      dialogFormVisible:false,
        options: [{
          value: '1',
          label: '国家'
        }, {
          value: '2',
          label: '省份、直辖市'
        }, {
          value: '3',
          label: '地市'
        }, {
          value: '4',
          label: '区县'
        }],
      formLabelWidth: "80px",
      isExpandAll: false,
      showItemList: [],
      allItemList: [],
      tableData: [
        {
          id: 1,
          areaName: "中国",
          areaCode: "01",
          areaType: "1",
          areaTypeName: "国家",
          remark: "",
          parentId: 0,
          children: [
            {
              id: 2,
              areaName: "北京市",
              areaCode: "0101",
              areaType: "2",
              areaTypeName: "首都",
              remark: "",
              parentId: 1,
              children: []
            },
            {
              id: 3,
              areaName: "浙江省",
              areaCode: "0102",
              areaType: "3",
              areaTypeName: "省",
              remark: "",
              parentId: 1,
              children: [
                {
                  id: 4,
                  areaName: "杭州市",
                  areaCode: "010201",
                  areaType: "4",
                  areaTypeName: "省会",
                  remark: "",
                  parentId: 3,
                  children: []
                }
              ]
            
            }
          ]
        },
        { id: 5,
          areaName: "俄罗斯",
          areaCode: "02",
          areaType: "1",
          areaTypeName: "国家",
          remark: "",
          parentId: 0,
          children: [
            {
                  id: 6,
                  areaName: "莫斯科",
                  areaCode: "0201",
                  areaType: "2",
                  areaTypeName: "首都",
                  remark: "",
                  parentId: 5,
                  children: []
                }
          ]}
      ],
       
    };
  },
  mounted() {
        this.getList();
    },
  methods: {
    cancle(){

    },
    handleAdd(){

    },
    getList(){
        this.$api.formPost( '/api/auth/sysArea/doGetAll').then(res => {
            if (res.retHead.code === '0000000') {
                this.tableData = res.retBody;
            }
        });
    },
    delete() {},
    showDialog() {
      this.dialogFormVisible=true;
    },
    expandAll() {
      if (this.isExpandAll) {
        this. foldAll();
        this.isExpandAll = false;
      } else {
        this.unFoldAll();
        this.isExpandAll = true;
      }
    },
    /**
     * 展开所有下级
     */
    unFoldAll() {
      let queryResult = this.$refs.tableTreeRef.$el.children[2].querySelectorAll(
        "tr"
      );
      for (let i = 0; i < queryResult.length; i++) {
        let item = queryResult[i];
        item.style.display = "";
        let div = item.querySelectorAll("td > div > div")[0];
        if(div){
           div.setAttribute("class","el-table__expand-icon el-table__expand-icon--expanded");
        }
        
      }
    },
    /**
     * 收起所有下级
     */
    foldAll() {
      let queryResult = this.$refs.tableTreeRef.$el.children[2].querySelectorAll(
        "tr"
      );
      for (let i = 0; i < queryResult.length; i++) {
        let item = queryResult[i];
        if (item.getAttribute("class")!="el-table__row el-table__row--level-0") {
          item.style.display = "none";
        }
       let div = item.querySelectorAll("td > div > div")[0];
        if(div){
           div.setAttribute("class","el-table__expand-icon");
        }
      }
      // IE 不支持 forEach
      // this.$refs.tableTreeRef.$el.children[2].querySelectorAll('tr').forEach((item, index) => {
      //   if (index !== 0) {
      //     item.style.display = 'none'
      //   }
      //   let classList = item.querySelectorAll('td > div > div')[0].classList
      //   classList.contains('el-table__expand-icon') && item.querySelectorAll('td > div > div')[0].classList.remove('el-table__expand-icon--expanded')
      // })
    }
  }
};
</script>